<template>
  <component :is="exampleId"></component>
</template>

<script>
import Exam01 from '@/examples/01.vue';
import Exam02 from '@/examples/02.vue';
import Exam03 from '@/examples/03.vue';
import Exam04 from '@/examples/04.vue';
import Exam05 from '@/examples/05.vue';
import Exam06 from '@/examples/06.vue';
import Exam07 from '@/examples/07.vue';
import Exam08 from '@/examples/08.vue';
import Exam09 from '@/examples/09.vue';
import Exam10 from '@/examples/10.vue';
import Exam11 from '@/examples/11.vue';
import Exam12 from '@/examples/12.vue';
import Exam13 from '@/examples/13.vue';
import Exam14 from '@/examples/14.vue';
import Exam15 from '@/examples/15.vue';
import Exam16 from '@/examples/16.vue';
import Exam17 from '@/examples/17.vue';
import Exam18 from '@/examples/18.vue';
import Exam19 from '@/examples/19.vue';
import Exam20 from '@/examples/20.vue';
import Exam21 from '@/examples/21.vue';
import Exam22 from '@/examples/22.vue';
import Exam23 from '@/examples/23.vue';
import Exam24 from '@/examples/24.vue';
import Exam25 from '@/examples/25.vue';
import Exam26 from '@/examples/26.vue';
import Exam27 from '@/examples/27.vue';
import Exam28 from '@/examples/28.vue';

export default {
  components: {
    Exam01,
    Exam02,
    Exam03,
    Exam04,
    Exam05,
    Exam06,
    Exam07,
    Exam08,
    Exam09,
    Exam10,
    Exam11,
    Exam12,
    Exam13,
    Exam14,
    Exam15,
    Exam16,
    Exam17,
    Exam18,
    Exam19,
    Exam20,
    Exam21,
    Exam22,
    Exam23,
    Exam24,
    Exam25,
    Exam26,
    Exam27,
    Exam28
  },
  data() {
    return {
      exampleId: 'Exam01'
    }
  },
  watch: {
    $route(to) {
      if (to.name === 'Examples') {
        this.exampleId = `Exam${to.params.examId}`;
      }
    }
  },
  mounted() {
    this.exampleId = `Exam${this.$route.params.examId}`;
  },
}
</script>
